<template>
	<view class="container">
		<view class="top">
		</view>

		<view class="logo">
			<image class="logo" src="../../static/Tlogo.png" mode=""></image>
		</view>

		<view style="padding:40rpx; display: flex;align-items: center;width: 100%;">
			<view class="con"
				style="z-index: 999;  padding:50px 20px 20px;margin-top: -200rpx; width: 80%; border-radius: 34rpx;">

				<uni-forms ref="form" :model="user" :rules="rules">
					<uni-forms-item>
						<text style="font-size: 50rpx;"><b>欢迎登录</b></text>
					</uni-forms-item>
					<uni-forms-item name="Account">
						<uni-easyinput type="text" v-model="user.Account" placeholder="请输入账号" />
					</uni-forms-item>
					<uni-forms-item name="PassWord">
						<uni-easyinput v-model="user.PassWord" type="password" placeholder="密码" @confirm="toPage">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item>
						<button @click="toPage" type="primary"
							style="margin-top:25rpx; font-weight:700;  background-color:#D1100B;">登 录</button>
					</uni-forms-item>
					<uni-forms-item>
						<view style="display: flex;justify-content: space-between;">
							<!-- <view> -->

							<!-- <uni-data-checkbox v-model="radio" multiple :localdata="hobby"></uni-data-checkbox> -->
							<!-- </view> -->
							<view class="textbox">
								<text @click="forget">忘记密码?</text>
								<text @click="register">注册账号</text>
							</view>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<!-- <view class="vxlogin">
			<image @click="wxLogin" src="/static/wx.png" mode=""></image>
		</view> -->
	</view>
</template>

<script>
	import code from '../../components/code.js'
	export default {
		data() {
			return {
				rules: {
					Account: {
						rules: [{
							required: true,
							errorMessage: '请输入账号',
						}]
					},
					PassWord: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					},
				},
				user: {
					Account: '',
					PassWord: '',
				},
				radio: [],
				hobby: [{
					text: '离线模式',
					value: 1
				}]
			}
		},
		onLoad() {
			let userName = uni.getStorageSync('userName')
			let password = uni.getStorageSync('password')
			if (userName && password) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
			// 判断设备是否为iPhone并判断版本
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					this.system = res.system // ios
					this.platform = res.platform // 14.3
				}
			})
		},
		methods: {
			toPage() {
				this.$refs.form.validate().then(obj => {
					uni.showLoading({
						title: '登录中'
					})
					this.$http('/Base_Manage/Home/SubmitLogin', {
						"userName": obj.Account,
						"password": obj.PassWord,
					}).then(res => {
						// console.log(res)
						if (res.Success) {
							uni.setStorageSync('userName', obj.Account)
							uni.setStorageSync('password', obj.PassWord)
							uni.setStorageSync('tokenKey', 'Bearer ' + res.Data);
							uni.setStorageSync('userInfo', res.Data)
							uni.navigateTo({
								url: '/pages/index/index'
							})
						} else uni.showToast({
							icon: 'none',
							title: res.Msg
						})
						uni.hideLoading()

					})
				})
			},
			// getUserInfo() {
			// 	this.$http('Base_Manage/Home/GetAppOperatorInfo').then(res => {
			// 		uni.setStorageSync('userInfo', res.Data)
			// 		uni.switchTab({
			// 			url: '/pages/TakePict/TakePict'
			// 		})
			// 	})
			// },
			forget() {
				uni.navigateTo({
					url: '/pages/login/forget'
				})
			},
			register() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			appleLogin() {
				uni.login({
					provider: 'apple',
					success: loginRes => {
						uni.getUserInfo({
							provider: 'apple',
							success: userInfoRes => {
								console.log('获取用户信息成功' + JSON.stringify(userInfoRes))
							}
						})
					},
					fail: err => {
						// console.log('apple登录失败' + JSON.stringify(err))
						uni.showToast({
							title: '登录失败',
							icon: 'none'
						})
					}
				})
			},
			wxLogin() {
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: (result) => {
						console.log(result);
						this.wxLoginApi(result.code)
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							title: '微信授权获取失败,请重新尝试'
						})
					}
				})
			},
			wxLoginApi(code) {
				uni.showLoading()
				this.$http('Base_Manage/Base_VIPUserInfo/GetWxAccessToken?Code=' + code + '&AppType=xunjiango', ).then(
					res => {
						console.log(res);
						uni.hideLoading()
						if (res.Success) {
							this.wxSubLogin(res.Data.openid, res.Data.unionid)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						}
					})
			},
			wxSubLogin(openid, unionid) {
				this.$http('Base_Manage/Base_VIPUserInfo/GetVIPUserInfoData', {
					openid,
					unionid
				}).then(res => {
					console.log(res);
					uni.hideLoading()
					if (res.Success) {
						if (res.Data.Token) {
							uni.setStorageSync('tokenKey', 'Bearer ' + res.Data.Token)
							this.getUserInfo()
						} else {
							uni.navigateTo({
								url: `/pages/index/wxLogin?openid=${openid}&unionid=${unionid}`,
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
		background-color: #f4f7f9;

		.top {
			background: url(@/static/bj2.png)no-repeat center center;
			overflow: hidden;
			background-size: 100% 100%;
			width: 100%;
			min-height: 100%;
			background-repeat: no-repeat;
		}


		.logo {
			width: 240rpx;
			height: 265rpx;
			margin: 0 auto;
			border-radius: 20px;
			margin-top: -75vh;

		}

		.form {
			position: absolute;
			right: 0;
			left: 0;
			top: 0;
			bottom: 0;
			margin: 0 auto;
		}

		.textbox {
			width: 100%;
			padding-top: 50rpx;
			font-weight: bold;
			font-size: 16px;
			display: flex;
			justify-content: space-between;
		}

		.vxlogin {
			position: absolute;
			bottom: 20px;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: space-around;

			image {
				width: 44px;
				height: 44px;
			}

		}
	}

	::v-deep.uni-easyinput__placeholder-class{
		color: #999;
		font-size: 20px;
	}

	::v-deep .uni-easyinput__content-input {
		width: auto;
		position: relative;
		overflow: hidden;
		flex: 1;
		line-height: 1;
		font-size: 28px;
		height: 45px;
	}
	::v-deep .uni-input-input{
		font-size: 25px;
	}
</style>